<template>
  <div id="orderDetail">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="订单ID">
        <el-input v-model="form.or_id" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户ID">
        <el-input v-model="form.ber_id" disabled></el-input>
      </el-form-item>
      <el-form-item label="服务类型">
        <el-input v-model="or_kind" disabled></el-input>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="form.or_product" disabled></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-input v-model="or_type" disabled></el-input>
      </el-form-item>
      <el-form-item label="下一步流程">
        <el-input v-model="form.or_process"
                  :disabled="!isEdit"></el-input>
        <el-link style="position: absolute;width: 80px"
                 :underline="false"
                 @click="isEdit = !isEdit"
                 type="primary">
          <span v-if="isEdit" @click="editProcess">提交</span>
          <span v-else>编辑</span>
        </el-link>
      </el-form-item>
      <template v-if="form.or_kind === 3">
        <el-form-item label="咨询内容">
          <el-input v-model="helpContent"
                    disabled
                    type="textarea"></el-input>
        </el-form-item>
      </template>
      <template v-else-if="form.or_url">
        <el-form-item style="text-align: left">
          <a class='download' :href='form.or_url' download=""  title="下载">
            下载资料
          </a>
        </el-form-item>
      </template>

      <el-button type="primary"
                 @click="finishOrder"
                 style="margin-right: 10px">完成订单</el-button>
      <span style="font-size: 12px">资料不符或发送回执？</span>
      <el-link type="primary"
               :underline="false"
               @click="sendMessage = true"
               style="font-size: 16px">发消息</el-link>
    </el-form>

    <el-dialog title="发消息"
               :visible.sync="sendMessage"
               append-to-body
               width="60%"
    >
      <send-message :message-form="messageForm"
                    :path="path"
                    @cancelSend="sendMessage = false"/>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import Upload from "../../../components/content/Upload";
  import mixin from "../../../mixin/server";
  import SendMessage from "../../../components/content/SendMessage";

  export default {
    name: "OrderDetail",
    inject:['reload'],
    mixins:[mixin],
    components:{
      Upload,
      SendMessage
    },
    data(){
      return {
        path:'/server/myOrder/all',
        form : {},
       or_kind : '',
        or_type : '',
        isEdit:false,
        helpContent : '',
        sendMessage : false,
        messageForm:{
          or_id : '',
          ber_id : '',
          ser_id : '',
          news_type : 1,
          news_content : ''
        }
      }
    },
    mounted() {
      let id = this.$route.params.or_id

      let url = 'https://haotry.top/api/serviceSide/getOrderById'
      axios.post(url, JSON.stringify({or_id: id}), {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        let data = res.data
        console.log(data)
        if (data.status === 200) {
          this.form = data.data
          this.or_kind = this.format(this.form.or_kind,0)
          this.or_type = this.format(this.form.or_type,1)

          this.messageForm.or_id = this.form.or_id
          this.messageForm.ber_id = this.form.ber_id
          this.messageForm.ser_id = this.form.ser_id

          if(this.form.or_kind === 3) {
            axios.post('https://haotry.top/api/admin/getRecourseByKey', JSON.stringify({or_id: this.form.or_id,ser_id:this.form.ser_id}), {
              headers: {
                'Content-Type': 'application/json'
              }
            }).then(res2 => {
              console.log(res2)
              if(res2.status == 200){
                this.helpContent = res2.data[0].rec_con
              }
            })
          }

        } else {
          alert('获取失败')
          this.$router.back()
        }
      })
    },
    methods:{
      editProcess(){
        let url = 'https://haotry.top/api/serviceSide/modificationProcess'
        let params = {
          ser_id : this.form.ser_id,
          or_id : this.form.or_id,
          or_process : this.form.or_process
        }
        axios.post(url, JSON.stringify(params), {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          let data = res.data
          console.log(data)
          if(data.status === 200)
          {
            this.$message({
              type: 'success',
              message: '修改流程成功!'
            });
          }
          else{
            this.$message({
              type: 'info',
              message: '修改流程失败!'
            });
          }
        })
      },
      finishOrder(){
        let url = 'https://haotry.top/api/serviceSide/completeOrder'
        let params = {
          ser_id: this.form.ser_id,
          or_id: this.form.or_id
        }
        axios.post(url, JSON.stringify(params), {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          let data = res.data
          console.log(data)
          if(data.status === 200)
          {
            this.$message({
              type: 'success',
              message: '恭喜你，完成订单!'
            });
            this.$router.push('/server/myOrder/finish')
          }
          else{
            this.$message({
              type: 'info',
              message: '很遗憾，订单完成失败!'
            });
          }
        })
      },
    }
  }
</script>

<style scoped>
  .el-form{
    width: 500px;
  }
  /deep/.el-textarea__inner{
    min-height: 200px !important;
  }
</style>